<template>
  <div class="hotSelected">
    <h1 class="title">热门精选</h1>
    <div class="content">
      <template v-for="item in selectedList" :key="item.data.houseId">
        <homeSelectedItemV9 @click="toDetails(item.data.houseId)" v-if="item.discoveryContentType === 9"
          :selectedItem="item.data">
        </homeSelectedItemV9>
        <homeSelectedItemV3 @click="toDetails(item.data.houseId)" v-else-if="item.discoveryContentType === 3"
          :selectedItem="item.data">
        </homeSelectedItemV3>
      </template>
    </div>
  </div>
</template>

<script setup>
import homeSelectedItemV3 from '@/components/home-selected-item-v9/home-selected-item-v3.vue';
import homeSelectedItemV9 from '@/components/home-selected-item-v3/home-selected-item-v9.vue';
import { useHomeStore } from '@/store/modules/home';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
const homeStore = useHomeStore()
const router = useRouter()

const { selectedList } = storeToRefs(homeStore)

function toDetails(houseId) {
  router.push(`/details/${houseId}`)

}

</script>

<style lang="less" scoped>
.hotSelected {
  padding: 2.66667vw 2.13333vw;

  .title {
    font-size: 5.86667vw;
    padding: 2.66667vw;
  }

  .content {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>